<template>
  <view :class="{'nonebg': onlyBack}" class="h-[140rpx] bg-gradient-to-r from-[#165DFF] to-[#1890ff] text-white rounded-b-[32rpx] shadow-md p-[24rpx_32rpx] w-full sticky top-0 z-10 box-border">
    <view class="flex items-center justify-center relative">
      <template v-if="showBack">
        <view
          class="absolute left-0 w-[60rpx] h-[60rpx] rounded-full bg-[rgba(255,255,255,0.2)] flex items-center justify-center text-[32rpx] cursor-pointer"
          @click="handleBack">
          <IconFont :name="backIcon" />
        </view>
      </template>
      <view class="text-[36rpx] font-bold h-[54rpx]">
        <slot name="title">{{ title }}</slot>
      </view>
      <slot name="right"></slot>
    </view>
    <slot></slot>
  </view>
</template>

<script setup lang="ts">
import { IconFont } from '@nutui/icons-vue-taro'
import { defineProps } from 'vue'
import Taro from '@tarojs/taro'

/**
 * 通用页面表头组件
 * @description 支持主色渐变背景、标题、返回按钮、插槽扩展，适配移动端。
 * @performance 仅渲染必要内容，支持自定义。
 */

const props = defineProps({
  title: { type: String, default: '' },
  showBack: { type: Boolean, default: true },
  backIcon: { type: String, default: 'rect-left' },
  paddingClass: { type: String, default: 'p-[24rpx_32rpx]' },
  onBack: { type: Function, default: null },
  onlyBack: { type: Boolean, default: false }
})

function handleBack() {
  if (typeof props.onBack === 'function') {
    props.onBack()
  } else {
    // Taro.navigateBack()
    history.back()
  }
}
</script>

<style lang="scss" scoped>
.nonebg {
  background: transparent !important;
  position: fixed !important;
  box-shadow: none !important;
}
</style>